<template>
  <div class="">
    <!-- 文章评论列表的list区域 -->
    <van-list
      v-model="loading"
      :finished="finished"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- 文章评论列表项的区域 -->
      <article-comment-item
        v-for="(item,index) in list"
        :key="index"
        :articleCommentItem="item"
        @reply-comment="$emit('reply-comment',$event)"
      ></article-comment-item>
    </van-list>
  </div>
</template>

<script>
// 导入获取所有文章评论的接口
import { getArticleComments } from '../../../api/comment.js'
// 导入文章评论列表项
import articleCommentItem from '../componments/articleCommentItem.vue'
export default {
  // 组件名称
  name: 'commentList',
  // 局部注册的组件
  components: {
    articleCommentItem
  },
  // 组件参数 接收来自父组件的数据
  props: {
    // 接收父组件文章详情页面传过来的文章的id属性
    source: {
      type: [Number, String, Object],
      required: true
    },
    // 接收父元素传的文章评论数据
    list: {
      type: Array,
      // default，默认值，如果是数组或者对象，需要通过函数的形式返回
      default: () => {
        return []
      }
    },
    type: {
      type: String,
      // 自定义 Prop 数据验证
      validator (value) {
        return ['a', 'c'].includes(value)
      },
      default: 'a'
    }

  },
  // 组件状态值
  data () {
    return {
      // list: [],
      loading: false,
      finished: false,
      // 获取文章评论的2个请求参数
      offset: null,
      limit: '10',
      error: false
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    // 手动的开启loading效果
    this.loading = true
    // 这步操作是为了在页面一加载的时候,就获取总的文章评论数量
    this.onLoad()
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    // 列表滚动时,触发的事件
    async onLoad () {
      try {
        // 1.调用获取文章评论的接口
        const { data } = await getArticleComments({
          type: this.type, // 评论类型，a是获取文章(article)的评论，c使获取评论(comment)的回复
          source: this.source.toString(), // 文章id或评论id
          offset: this.offset, // 获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
          limit: this.limit// 获取的评论数据个数，不传表示采用后端服务设定的默认每页数据量
        })
        // 把获得的文章评论的总数传递给父组件
        this.$emit('articleCommentTotal', data.data)
        console.log(data)
        const { results } = data.data
        // 把数据追加到list数组里面
        this.list.push(...results)
        console.log(results)
        // 2.关闭loading的状态
        this.loading = false
        // 3.判断是否还有数据
        if (results.length) {
          this.offset = data.data.last_id
        } else {
          this.finished = true
        }
      } catch (error) {
        this.error = true
        // 同时关闭loading的状态
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang="less">
</style>
